<!-- HTML5文档-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header">数据录入</div>
				<div class="layui-card-body" pad15>
					<div class="layui-form" lay-filter="">
                    <form th:action="@{/import}" method="post">
					  <div class="layui-form-item">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-inline">
						  <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
						</div>
					  </div>

					  <div class="layui-form-item">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-inline">
						  <input type="radio" name="sex" value="男" title="男">
						  <input type="radio" name="sex" value="女" title="女" checked>
						</div>
					  </div>

					  <div class="layui-form-item">
						<label class="layui-form-label">年龄</label>
						<div class="layui-input-inline">
						  <input type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
						</div>
					  </div>

					  <!--<div class="layui-form-item">-->
						<!--<label class="layui-form-label">头像</label>-->
							<!--<form action="../upload" method="post" enctype="multipart/form-data">-->
								<!--<input type="file" name="img" accept="image/*">-->
								<!--<input value="上传" class="layui-btn" lay-submit lay-filter="formDemo1">-->
							<!--</form>-->
							<!--&lt;!&ndash;<br>&ndash;&gt;-->
							<!--&lt;!&ndash;<img th:src="@{${filename}}" alt="图片">&ndash;&gt;-->
					  <!--</div>-->

					  <div class="layui-form-item">
						<label class="layui-form-label">所属行业</label>
						<div class="layui-input-inline">
						  <input type="text" name="industry" required  lay-verify="required" placeholder="请输入所属行业" autocomplete="off" class="layui-input">
						</div>
					  </div>

					  <div class="layui-form-item">
						<label class="layui-form-label">地区</label>
						<div class="layui-input-inline">
						  <input type="text" name="region" required  lay-verify="required" placeholder="请输入地区" autocomplete="off" class="layui-input">
						</div>
					  </div>


					  <div class="layui-form-item">
						<label class="layui-form-label" for="s_experience">学习经历</label>
						<div class="layui-input-inline">
							<button class="layui-btn layui-btn-primary" onclick="addRow1()">+</button>
						</div>
					  </div>

					  <div class="layui-form-item">
						<table id="s_fieldTable">
							<tr id="tr1">
								<th>时间</th>
								<th>学校</th>
								<th>班级</th>
							</tr>
							<tr id="tr2">
								<td id="td1"><input type="text" name="s_time"></td>
								<td id="td2"><input type="text" name="s_school"></td>
								<td id="td3"><input type="text" name="s_class"></td>
							</tr>
						</table>
					  </div>

					  <div class="layui-form-item">
						<label class="layui-form-label" for="w_experience">工作经历</label>
						<div class="layui-input-inline">
							<button class="layui-btn layui-btn-primary" onclick="addRow2()">+</button>
							<!--<input type="button" value="+" onclick="addRow2()">-->
						</div>
					  </div>

					  <div class="layui-form-item">
							<table id="w_fieldTable">
								<tr id="tr11">
									<th>时间</th>
									<th>公司</th>
									<th>职务</th>
								</tr>
								<tr id="tr21">
									<td id="td12"><input type="text" name="w_time"></td>
									<td id="td22"><input type="text" name="w_firm"></td>
									<td id="td32"><input type="text" name="w_position"></td>
								</tr>
							</table>
					  </div>

					  <div class="layui-form-item">
						<label class="layui-form-label">个人标签</label>
						<div class="layui-input-inline">
						  <input type="text" name="i_label" required  lay-verify="required" placeholder="请输入个人标签" autocomplete="off" class="layui-input">
						</div>
					  </div>

					 <div class="layui-form-item">
						<label class="layui-form-label">个人标签</label>
						<div class="layui-input-inline">
						  <select name="s_label" lay-verify="required" lay-search>
							<option value=""></option>
							<option value="0">活泼</option>
							<option value="1">乐观</option>
							<option value="2">羽毛球</option>
							<option value="3">乒乓球</option>
						  </select>
						</div>
					  </div>

					  <div class="layui-form-item">
						<div class="layui-input-block">
						  <!--<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>-->
							<button class="layui-btn" type="submit">提交</button>
							<button type="reset" class="layui-btn layui-btn-primary">重置</button>
						</div>
					  </div>
					</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
    //追加一行
    function addRow1(){
        var tableNode =document.getElementById("s_fieldTable");
        var trNodeList = tableNode.getElementsByTagName("tr");
        //得到最后一行(tr)的所有td
        var tdNodeList = trNodeList[trNodeList.length - 1].getElementsByTagName("td");
        var td_input_name = tdNodeList[0].getElementsByTagName("input")[0].name;
        var strIndex = td_input_name.indexOf("_");
        var number = td_input_name.substring(strIndex + 1)
        var trNode = document.createElement("tr");
        number++;
        var tdText = '';
        var td1_input_fieldName = '<td><input type="text" name="fieldName_' + number + '" value=""></td>';
        var td2_input_fieldSchool = '<td><input type="text" name="fieldSchool_' + number + '" value=""></td>';
        var td3_input_fieldClass = '<td><input type="text" name="fieldClass_' + number + '" value=""></td>';
        tdText = td1_input_fieldName + td2_input_fieldSchool + td3_input_fieldClass;
        trNode.innerHTML = tdText;
        tableNode.appendChild(trNode);
    }
    function addRow2(){
        var tableNode =document.getElementById("w_fieldTable");
        var trNodeList = tableNode.getElementsByTagName("tr");
        //得到最后一行(tr)的所有td
        var tdNodeList = trNodeList[trNodeList.length - 1].getElementsByTagName("td");
        var td_input_name = tdNodeList[0].getElementsByTagName("input")[0].name;
        var strIndex = td_input_name.indexOf("_");
        var number = td_input_name.substring(strIndex + 1)
        var trNode = document.createElement("tr");
        number++;
        var tdText = '';
        var td1_input_fieldName = '<td><input type="text" name="fieldName_' + number + '" value=""></td>';
        var td2_input_fieldFirm = '<td><input type="text" name="fieldFirm_' + number + '" value=""></td>';
        var td3_input_fieldPosition = '<td><input type="text" name="fieldPosition_' + number + '" value=""></td>';
        tdText = td1_input_fieldName + td2_input_fieldFirm + td3_input_fieldPosition;
        trNode.innerHTML = tdText;
        tableNode.appendChild(trNode);
    }
</script>

<script>
    layui.use('form', function(){
        var form = layui.form;
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>

